import React, { Component } from 'react';
import { NavBar, Space, Toast } from 'antd-mobile';
import SearchInput from "../../src/components/Allsearch.jsx";
import '../view/Search.scss'
import { hotSearch } from '../utils/api.js';

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchKey: [],
            hotSearch: []
        }
    }
    back = () => {
        this.props.history.go(-1);
    }
    componentDidMount() {
        if (localStorage.getItem("searchKey")) {
            var a = localStorage.getItem("searchKey");
            var searchList = a.split(" ");
            console.log("是一个数组吗", searchList)
            this.setState({ searchKey: searchList }, () => {
                console.log(this.state.searchKey)
            })
        } else {
            this.setState({})
        }
        hotSearch().then((res) => {

            this.setState({
                hotSearch: res.data.list
            })
        })
    }
    handleClick() {
        localStorage.removeItem("searchKey")
        this.setState({
            searchKey: []
        })
    }


    render() {
        return (
            <div className='search'>
                <NavBar onBack={this.back} className="font">搜索</NavBar>
                <SearchInput {...this.props} />
                <div className="box">
                    <div className='rencent'>
                        <p><span>最近搜索</span>
                            <span className='iconfont delete ' onClick={() => {
                                this.handleClick()
                            }}>&#xe636;</span></p>
                        <div className='content'>
                            {
                                this.state.searchKey.map((item, index) => {
                                    return (
                                        <span key={index}>{item}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className='hot'>
                        <p>热门搜索</p>
                        <div className='content'>
                            {
                                this.state.hotSearch.map((item, index) => {
                                    return (
                                        <span key={index}>{item}</span>
                                    )
                                })
                            }
                        </div>

                    </div>

                </div>

            </div>
        );
    }
}

export default Search;